<template>
    <div class="hello">
        <div class="left">
            <h3>小程序</h3>
            <ul>
                <li
                        v-for="(item,index) in nav"
                        :key="`nav_${index}`"
                        @click="addPageComponent(item)"
                >
                    {{item.name}}
                </li>
            </ul>
        </div>
        <div class="content">
         <div v-if="false">
             <h3>页面</h3>
             <grid-layout
                     :layout.sync="show"
                     :col-num="4"
                     :row-height="30"
                     :is-draggable="true"
                     :is-resizable="false"
                     :is-mirrored="false"
                     :vertical-compact="true"
                     :margin="[10, 10]"
                     :use-css-transforms="true"

             >
                 <grid-item
                         class="template-item"
                         v-for="(item,index) in show"
                         :key="index"
                         :x="item.x"
                         :y="item.y"
                         :w="item.w"
                         :h="item.h"
                         :i="item.i"
                         @moved="moved"
                 >
                     {{index}}
                     <render-page :page-components="[item]"></render-page>
                 </grid-item>
             </grid-layout>
         </div>
            <div v-if="true">
                <h3>插件2</h3>
                <div style="display: flex">
                   <div style="flex: 1">
                       <draggable class="list-group" :list="show" group="group" @change="log">
                           <RenderPage
                                   :page-components="[element]"
                                   class="list-group-item"
                                   v-for="(element, index) in show"
                                   :key="element.name + index"
                           >
                           </RenderPage>
                       </draggable>
                   </div>
                   <div style="flex: 1">
                       <draggable class="list-group" :list="show2" group="group" @change="log">
                           <RenderPage
                                   :page-components="[element]"
                                   class="list-group-item"
                                   v-for="(element, index) in show2"
                                   :key="element.name + index"
                           >
                           </RenderPage>
                       </draggable>
                   </div>
                  <div style="flex: 1;">
                      <draggable :list="show3" class="list-group"  group="group" @change="log">
                          <RenderPage v-for="(item,index) in show3" :key="item.name+index"  class="ist-group-item" :page-components="[item]"></RenderPage>

                      </draggable>
                  </div>
                </div>
            </div>
            <div>
                <div class="col-32">
                    <h3>Draggable 1</h3>
                    <draggable class="list-group" :list="show" group="people" @change="log">
                        <RenderPage
                                :page-components="[element]"
                                class="list-group-item"
                                v-for="(element, index) in show"
                                :key="element.name + index"
                        >
                        </RenderPage>
                    </draggable>
                </div>
                <div class="col-3">
                    <h3>Draggable 2</h3>
                    <draggable class="list-group" :list="show2" group="people" @change="log">
                        <div
                                class="list-group-item"
                                v-for="(element, index) in show2"
                                :key="element.name + index"
                        >
                            <RenderPage :page-components="[element]"></RenderPage>
                            {{ element.name }} {{ index }}
                        </div>
                    </draggable>
                </div>

                <div class="col-33">
                    <h3>Draggable 3</h3>
                    <draggable class="list-group" :list="show3" group="people" @change="log">
                        <div
                                class="list-group-item"
                                v-for="(element, index) in show3"
                                :key="element.name + index"
                        >
                            <RenderPage :page-components="[element]"></RenderPage>
                            {{ element.name }} {{ index }}
                        </div>
                    </draggable>
                </div>
            </div>



    </div>
        <div class="right">
            <h3>排序</h3>
            <div
                    class="layout-item"
                    v-for="(item,index) in layoutArr"
                    :key="`layout_${index}`"
                    :class="index === layoutChose ? 'layout-chose':''"
                    @click="changeLayout(index)"
            >
                {{item.label}}
            </div>
        </div>

    </div>
</template>

<script>

    import {GridLayout} from "vue-grid-layout";
    import {GridItem} from "vue-grid-layout";
    import draggable from "vuedraggable";

    import TimeBox from "./timeBox";
    import RenderPage from "./renderPage";
    import BoxFirst from "./box1";


    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        // eslint-disable-next-line vue/no-unused-components
        components: {GridLayout, GridItem, draggable,TimeBox, RenderPage, BoxFirst},
        data() {
            return {
                nav: [],
                show: [],
                show2:[],
                show3:[],
                layoutChose: 0,
                layoutArr: [
                    {
                        type: 1,
                        label: '1-2-1',
                        layout: [1, 2, 1]
                    }, {
                        type: 2,
                        label: '1-1-1',
                        layout: [1, 1, 1]
                    }, {
                        type: 3,
                        label: '1-1-2',
                        layout: [1, 1, 2]
                    }, {
                        type: 4,
                        label: '2-1-1',
                        layout: [2, 1, 1]
                    }
                ]
            }
        },
        created() {
            this.initPage();
        },
        methods: {
            log(){},
            initPage() {
                let arr = [
                    {
                        name: "普通盒子",
                        template: 'box-first',
                        index: 0,
                        x: 0, y: 0, w: 0, h: 2, i: "1"
                    }, {
                        name: "时间盒子",
                        template: 'time-box',
                        index: 1,
                        x: 0, y: 0, w: 0, h: 2, i: "2"
                    }
                ];
                this.nav = arr;
            },
            addPageComponent(val) {
                let obj = JSON.parse(JSON.stringify(val));
                let len = this.show.length;
                let layout = this.layoutArr[this.layoutChose].layout;
                obj.i = len;


                obj.w = layout[len % 3];
                let last = this.show[this.show.length - 1] || {offsetX: 0, offsetY: 0, x: 0, y: 0, w: 0, h: 2};
                if (len % 3 === 0) {
                    obj.x = 0;
                    obj.y = last.offsetY;
                    obj.offsetX = obj.w;
                    obj.offsetY = obj.y + obj.h;
                } else {
                    obj.x = last.offsetX;
                    obj.y = last.offsetY;
                    obj.offsetX = obj.x + obj.w;
                    obj.offsetY = obj.y;
                }

                this.show.push(obj);
                if(!len){
                    this.show2.push(obj)
                    this.show3.push(obj)
                }
            },
            changeLayout(index) {
                this.layoutChose = index;
                this.changBox();
            },
            changBox() {
                let data = JSON.parse(JSON.stringify(this.show));
                this.show = [];
                for (let index = 0; index < data.length; index++) {
                    let last = index ? data[index - 1] : {offsetX: 0, offsetY: 0, x: 0, y: 0, w: 0, h: 2};
                    let item = data[index];
                    this.setChangeBox(item, index, last)
                }
                this.show = data;

            },
            setChangeBox(val, index, last) {
                let layout = this.layoutArr[this.layoutChose].layout;
                val.w = layout[index % 3];
                if (index % 3 === 0) {
                    val.x = 0;
                    val.offsetX = val.w;
                } else {
                    val.x = last.offsetX;
                    val.offsetX = val.x + val.w;
                }
            },
            moved() {
                this.$nextTick(() => {
                    let data = JSON.parse(JSON.stringify(this.show));
                   data.map((item)=>{
                       console.log(item.y);
                   })
                    this.show = [];
                    data.sort((a, b) => {
                        if (a.y === b.y) {
                            return a.x - b.x;
                        }
                        return a.y - b.y
                    })

                    let layout = this.layoutArr[this.layoutChose].layout;
                    console.log(123456);
                    for (let index = 0; index < data.length; index++) {
                        if (index) {
                            this.movedChange(data[index], data[index - 1], index, layout)
                        } else {
                            this.movedChange(data[index], {offsetX: 0, offsetY: 0}, index, layout)
                        }

                    }
                    this.show = JSON.parse(JSON.stringify(data));
                    console.log(JSON.parse(JSON.stringify(data)));
                })
            },
            movedChange(data, last, index, layout) {
                data.w = layout[index % 3];
                data.x = last.offsetX;
                data.offsetX = data.x + data.w;

                console.log(data.y);
            }
        }


    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .hello {
        display: flex;
    }

    .left {
        flex: 300px 0 0;
        border-right: 1px solid #2c3e50;
    }

    .content {
        flex: 1;
    }

    .right {
        flex: 100px 0 0;
    }

    .template-item {
        background-color: antiquewhite;
    }

    ul {
        margin: 0;
        padding: 0;
    }

    ul li {
        list-style: none;
        cursor: pointer;
        padding: 10px;
        margin: 10px;
        background-color: antiquewhite;
        text-align: center;
    }

    .right .layout-item {
        padding: 10px 15px;
        margin: 10px;
        background-color: antiquewhite;
        cursor: pointer;
    }

    .right .layout-chose {
        background-color: brown;
        color: #ffffff;
        font-weight: bold;
    }
    .list-group{
        border: 1px saddlebrown solid;
        margin: 10px;
        min-height: 100px;
        flex: 1;
    }
</style>
